<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp" %>
<%@ include file="/common/datatables.jsp" %>
	<div class="col-xs-12">
	</div>
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div class="row">
			<div class="col-xs-12">
				<div class="table-header">产品列表</div>
				<input type="hidden" name="productId" id="productId" value="${product.productId}" />

				<!-- div.table-responsive -->
				
				<!-- div.dataTables_borderWrap -->
				<div>
					<table id="dataProductList"
						class="table table-striped table-bordered table-hover" style="table-layout:fixed">
						<thead>
							<tr>
								<th class="text-center">产品名称</th>
								<th class="text-center">产品状态</th>
								<th class="text-center">产品渠道</th>
								<th class="text-center">操作</th>
							</tr>
						</thead>
						<tbody>
							 <tr><td colspan="4" align="center">数据加载中...</td></tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="hr hr-18 dotted hr-double"></div>

		<!-- PAGE CONTENT ENDS -->
	</div>
	<!-- /.col -->
<!-- /.row -->
		 
<div id="productDetailIframe"  class="publicDragDom"></div>

<!-- page specific plugin scripts -->
<script type="text/javascript">
	var scripts = [null, null];
	$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
		
		var dataTables = $("#dataProductList").dataTable({
							"bProcessing": true,
							"bServerSide": true,
							"bSort": false,
							"bFilter": false,
							"bAutoWidth": false,
							"sPaginationType": "full_numbers",
							"oLanguage" : oLanguage,
							"bAutoWidth": false,
							"fnInitComplete" : function(param) {
								$("#dataProductList_filter")
										.append(
												"<button class=\"btn btn-sm btn-purple btn-right\" type=\"button\" id=\"insert\" onclick=\"insert()\">"
														+ "<i class=\"ace-icon fa fa-plus-square bigger-110\"></i>"
														+ "新增" + "</button>");
							},
							"sAjaxSource": "${ctx}/product/queryList",
							"fnServerParams": function ( aoData ) {
								aoData.push( { "name": "productName", "value": "${product.productName}" } );
							},
							"fnServerData": fnDataTablesPipeline,
							"sServerMethod": "POST",
							"fnDrawCallback" : function(param) {			
					        	$('#dataProductList tbody td').each(function(index){
								    $this = $(this);
								    $this.attr("class","td-overflow");
								    $this.attr("style","width:150px;");
								    var titleVal = $this.text();
								    if (titleVal != '') {
								      $this.attr('title', titleVal);
								    }
								});
								
							}  
		});

		$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
			_title : function(title) {
				var $title = this.options.title || '&nbsp;'
				if (("title_html" in this.options)
						&& this.options.title_html == true)
					title.html($title);
				else
					title.text($title);
			}
		}));

		//版本详细信息
		$('#productDetailIframe').dialog(
						{
							hide : false,
							autoOpen : false,
							width : 430,
							height : 350,
							modal : true,
							//bgiframe:true,
							title : "<div class='widget-header'><h4 class='smaller'><i class='ace-icon fa fa-cog green'></i>&nbsp; 产品信息</h4></div>",
							title_html : true,
							open:function (event) {
								var productBtnFlag = $(this).data("productBtnFlag");
								if(productBtnFlag =="add"){
									$("#btnPModify").hide();
									$("#btnPSave").show();
									$("#btnPDelete").hide();
									$("#btnPCancle").hide();
									$("#btnPClose").show();	
								}else if(productBtnFlag =="show"){
									$("#btnPModify").show();
									$("#btnPSave").hide();
									$("#btnPDelete").hide();	
									$("#btnPCancle").hide();
									$("#btnPClose").show();
								}
							},
							buttons : [
									{
										id : "btnPModify",
										html : "<i class='ace-icon fa fa-pencil-square-o bigger-110'></i>&nbsp; 修改",
										"class" : "btn btn-primary btn-minier",
										click : function() {
											modify();
										}
									},
									{
										id : "btnPSave",
										html : "<i class='ace-icon fa fa-floppy-o bigger-110'></i>&nbsp; 保存",
										"class" : "btn btn-success btn-minier",
										click : function() {
											save();
										}
									},
									{
										id : "btnPDelete",
										html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 删除",
										"class" : "btn btn-danger btn-minier",
										click : function() {
											removeProduct();
										}
									},
									{
										id : "btnPCancle",
										html : "<i class='ace-icon fa fa-undo bigger-110'></i>&nbsp; 取消",
										"class" : "btn btn-warning btn-minier",
										click : function() {
											cancle();
										}
									},
									{
										id : "btnPClose",
										html : "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 关闭",
										"class" : "btn btn-minier",
										click : function() {
											$(this).dialog("close");
										}
									} ]
						});
		
	});
	function insert(){
		$("#productDetailIframe").hide();
		$("#productDetailIframe").load("${ctx}/product/toInsert?"+new Date().getTime(), function(){
			$("#productDetailIframe").show();
			$("#productDetailIframe").data("productBtnFlag","add").dialog("open");
		});
	}
	//跳转到详情页
	function showProductList(productId) {
	    $("#productDetailIframe").hide();
	   	$("#productDetailIframe").load("${ctx}/product/getProductDetailInfo/"+productId+"?"+new Date().getTime(),function(){
	   		$("#productDetailIframe").show();
		   	$("#productDetailIframe").data("productBtnFlag","show").dialog("open");
	   	});
	   
	}
	
	
	//删除
	function removeProduct(productId){
		removeItem(productId,function(){
			$("#productList").load("${ctx}/product/list.do?temp="+new Date().getTime());
		});
	} 


	function removeItem(productId,callback){
					if(confirm("确定删除该项吗?")){
						$.post("${ctx}/product/delete/"+productId,null,function(result){
							if(result[0] == "ok"){
								alert("删除成功！");
								$("#productDetailIframe").dialog("close");
								callback();
							}else{
								alert(result[1]);
								disabledAll("productDetailForm");
							}
						})
					}
		}
	
	
</script>
